<template>
  <div>
    <div style="margin-bottom: 10px;">
        <!-- 筛选 -->
        <div style="float: left;display: flex;">
        <el-input
            @clear="initSystemApplication"
            clearable
            prefix-icon="el-icon-search"
            placeholder="请输入应用编码"
            class="initSystemApplication"
            v-model="applicationPage.clientId"
            @keydown.enter.native="initSystemApplicationQuery">
        </el-input>
        <el-input
            @clear="initSystemApplication"
            clearable
            style="margin-left: 8px;"
            prefix-icon="el-icon-search"
            placeholder="请输入应用秘钥"
            class="initSystemApplication"
            v-model="applicationPage.clientSecretClear"
            @keydown.enter.native="initSystemApplicationQuery">
        </el-input>
        <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initSystemApplicationQuery">查询</el-button>
        </div>
        <div style="display: flex;justify-content: flex-end">
            <el-button
                type="primary"
                @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
            </el-button>
            <el-button
                type="primary"
                @click="selectHigh"><i class="el-icon-search"></i><span>高级查询</span>
            </el-button>
            <el-button
                type="primary"
                @click="insertSystemApplication"><i class="el-icon-plus"></i><span>新增应用</span>
            </el-button>
        </div>
        <!-- 高级查询 -->
        <div v-if="flag" style="margin-top: 8px;float: left;display: flex;margin-bottom: 8px;">
            <el-input
                    @clear="initSystemApplication"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入应用名称"
                    class="initSystemApplication"
                    v-model="applicationPage.clientName"
                    @keydown.enter.native="initSystemApplicationQuery">
            </el-input>
            <el-input style="margin-left: 8px;"
                    @clear="initSystemApplication"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入授权类型"
                    class="initSystemApplication"
                    v-model="applicationPage.authorizedGrantTypes"
                    @keydown.enter.native="initSystemApplicationQuery">
            </el-input>
            <el-input style="margin-left: 8px;"
                    @clear="initSystemApplication"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入明文秘钥"
                    class="initSystemApplication"
                    v-model="applicationPage.clientSecretClear"
                    @keydown.enter.native="initSystemApplicationQuery">
            </el-input>
            <el-input style="margin-left: 8px;"
                    @clear="initSystemApplication"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入授权范围"
                    class="initSystemApplication"
                    v-model="applicationPage.scope"
                    @keydown.enter.native="initSystemApplicationQuery">
            </el-input>
            <el-input style="margin-left: 8px;"
                    @clear="initSystemApplication"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入回调地址"
                    class="initSystemApplication"
                    v-model="applicationPage.webServerRedirectUri"
                    @keydown.enter.native="initSystemApplicationQuery">
            </el-input>
        </div>
    </div>
<!-- 列表 -->
    <div>
        <el-table
          :data="SystemApplicationsList"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
                <el-table-column fixed
                        label="应用名称"
                        width="200">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>应用编码: {{ scope.row.clientId }}</p>
                            <p>服务资源: {{ scope.row.resourceIds }}</p>
                            <p>加密秘钥: {{ scope.row.clientSecret }}</p>
                            <p>授权范围: {{ scope.row.scope }}</p>
                            <p>授权类型: {{ scope.row.authorizedGrantTypes }}</p>
                            <p>回调地址: {{ scope.row.webServerRedirectUri }}</p>
                            <p>客户端访问权限: {{ scope.row.authorities }}</p>
                            <p>令牌秒数: {{ scope.row.accessTokenValidity }} 等于 {{ scope.row.accessTokenValidity/60/60 }} 小时</p>
                            <p>刷新秒数: {{ scope.row.refreshTokenValidity }} 等于 {{ scope.row.refreshTokenValidity/60/60 }} 小时</p>
                            <p>描述信息: {{ scope.row.additionalInformation }}</p>
                            <p>自动授权: {{ scope.row.autoapprove }}</p>
                            <p>应用名称: {{ scope.row.clientName }}</p>
                            <p>明文秘钥: {{ scope.row.clientSecretClear }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.clientName }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="应用编码/client_id"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.clientId }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="令牌秒数"
                        width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.accessTokenValidity }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="刷新秒数"
                        width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.refreshTokenValidity }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="明文秘钥/client_secret"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.clientSecretClear }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="授权类型/grant_type"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.authorizedGrantTypes }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="授权范围"
                        width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.scope }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="回调地址"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.webServerRedirectUri }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="描述信息"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.additionalInformation }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-edit"
                                @click="updateSystemApplication(scope.row)">编辑</el-button>
                        <el-button
                                type="danger"
                                icon="el-icon-delete"
                                @click="deleteSystemApplication(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
             <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 新增编辑弹框 -->
        <div>
            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="60%">
                <div>
                    <el-form :model="Application" :rules="rules" ref="ApplicationForm">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="应用名称:" prop="clientName">
                                    <el-input style="width: 250px" prefix-icon="el-icon-edit" v-model="Application.clientName"
                                              placeholder="请输入应用名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="授权方式:" prop="authorizedGrantTypes">
                                    <el-input style="width: 460px" prefix-icon="el-icon-edit" v-model="Application.authorizedGrantTypes"
                                              placeholder="请设置授权方式"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="授权范围:" prop="scope">
                                    <el-input style="width: 250px" prefix-icon="el-icon-edit" v-model="Application.scope"
                                              placeholder="请设置授权范围"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="是否授权:" prop="autoapprove">
                                    <el-switch style="width: 460px"
                                        v-model="Application.autoapprove"
                                        active-text="自动授权"
                                        active-color="#13ce66"
                                        active-value='true'
                                        inactive-text="手动授权"
                                        inactive-color="#ff4949"
                                        inactive-value='false'>
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="明文秘钥:" prop="clientSecretClear">
                                    <el-input style="width: 250px" prefix-icon="el-icon-edit" v-model="Application.clientSecretClear"
                                              placeholder="请输入明文秘钥"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="回调地址:" prop="webServerRedirectUri">
                                    <el-input style="width: 460px" prefix-icon="el-icon-edit" v-model="Application.webServerRedirectUri"
                                              placeholder="请设置回调地址"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="令牌秒数:" prop="accessTokenValidity">
                                    <el-input-number style="width: 250px" v-model="Application.accessTokenValidity" :step="3600"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="刷新秒数:" prop="refreshTokenValidity">
                                    <el-input-number style="width: 460px;" v-model="Application.refreshTokenValidity" :step="3600"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item style="margin-left: 8px" label="描述信息:" prop="additionalInformation">
                                    <el-input type="textarea"
                                    rows="4"
                                    style="width: 818px;margin-right: 170px;" v-model="Application.additionalInformation"
                                              placeholder="请输入描述信息(必须是Json字符串)"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertApplicationRequest">确 定</el-button>
                </span>
            </el-dialog>
        </div>
  </div>
</template>

<script>
  import {arraysHasValue,jsonValidate} from '../../../utils/valid.js'
export default {
 name:"SystemApplication",
 data(){
    return{
            SystemApplicationsList:[],
            applicationPage:{
                clientId:'',
                clientSecretClear:'',
                scope:'',
                webServerRedirectUri:'',
                clientName:'',
                authorizedGrantTypes:'',
                pageNum:0,
                pageSize:0
            },
            loading: false,
            total: 0,
            flag: false,
            title:'',
            dialogVisible: false,
            Application:{
                clientId:'',
                clientName:'',
                authorizedGrantTypes:'',
                scope: '',
                autoapprove: 'true',
                clientSecretClear: '',
                webServerRedirectUri: '',
                accessTokenValidity: 0,
                refreshTokenValidity: 0,
                additionalInformation:'{}'
            },
            rules: {
                clientName:[{required:true,message:'请输入应用名称',trigger:'blur'},
                            {
                              pattern:/^.{1,255}$/,
                              message:'应用名称超过255个字符',
                              trigger:'blur',
                            }],
                authorizedGrantTypes:[{required: true, message: '请设置授权方式', trigger: 'blur'},
                                      {
                                        validator: (rule,value,callback)=>{
                                          let arrays = ["password,refresh_token","password"];
                                          arraysHasValue(rule,value,callback,arrays,'授权方式格式标准错误,目前支持授权方式：["password,refresh_token","password"]')
                                        },
                                        trigger:'blur',
                                      }],
                scope:[{required:true,message:'请设置授权范围',trigger:'blur'},
                      {
                        pattern:/^.{1,255}$/,
                        message:'授权范围超过255个字符',
                        trigger:'blur',
                      }],
                autoapprove:[{required: true, message: '请确定是否自动授权', trigger: 'blur'}],
                clientSecretClear:[{required:true,message:'请输入明文秘钥',trigger:'blur'},
                                  {
                                    pattern:/^.{1,255}$/,
                                    message:'明文秘钥超过255个字符',
                                    trigger:'blur',
                                  }],
                webServerRedirectUri:[{required: true, message: '请设置回调地址', trigger: 'blur'},
                                    {
                                      pattern:/^.{1,255}$/,
                                      message:'回调地址超过255个字符',
                                      trigger:'blur',
                                    }],
                accessTokenValidity:[{required:true,message:'请设置令牌秒数',trigger:'blur'}],
                refreshTokenValidity:[{required: true, message: '请设置刷新秒数', trigger: 'blur'}],
                additionalInformation:[{
                                        pattern:/^.{1,4096}$/,
                                        message:'描述信息超过4096个字符',
                                        trigger:'blur',
                                      },
                                      {
                                        validator: (rule,value,callback)=>{
                                          jsonValidate(rule,value,callback,'描述信息必须是Json格式')
                                        },
                                        trigger:'blur',
                                      }]
            }
        }
    },
    mounted(){
        this.initSystemApplicationQuery();
    },
    methods:{
        initSystemApplicationQuery(){
            this.loading = true;
                this.postRequest("/authorization/OauthClientDetails/query/OauthClientDetailsPageList",this.applicationPage).then(resp => {
                this.loading = false;
                if (resp) {
                  this.SystemApplicationsList = resp.data.list;
                  this.total = resp.data.total;
                }
            });
        },
        // 分页
        sizeChange(currentSize) {
            this.applicationPage.pageSize = currentSize;
            this.initSystemApplicationQuery();
        },
        currentChange(currentPage) {
            this.applicationPage.pageNum = currentPage;
            this.initSystemApplicationQuery();
        },
        // 查询输入框清除事件
        initSystemApplication(){
            this.initSystemApplicationQuery();
        },
        // 删除应用
        deleteSystemApplication(data){
            this.$confirm('此操作将永久删除【'+data.clientName+'】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.deleteRequest('/authorization/OauthClientDetails/delete/OauthClientDetailsByClientId?clientId='+data.clientId).then(resp=>{
                    if (resp){
                        this.initSystemApplicationQuery();
                    }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        // 重置查询条件
        resetCondition(){
            this.applicationPage.clientId = '';
            this.applicationPage.clientSecretClear = '';
            this.applicationPage.scope = '';
            this.applicationPage.webServerRedirectUri = '';
            this.applicationPage.authorizedGrantTypes = '';
            this.applicationPage.clientName = '';
            this.applicationPage.authorizedGrantTypes = '';
            this.initSystemApplicationQuery();
        },
        // 高级查询
        selectHigh(){
          if(this.flag){
            this.flag = false;
          }else{
            this.flag = true;
          }
        },
        // 新增应用
        insertSystemApplication(){
            this.title = "新增应用";
            this.dialogVisible = true;
        },
        updateSystemApplication(data){
            this.title = "编辑应用";
            this.dialogVisible = true;
            this.Application = data;
        },
        // 新增/编辑应用
        insertApplicationRequest(){
            if (this.Application.clientId) {
                    this.$refs['ApplicationForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/authorization/OauthClientDetails/update/OauthClientDetails", this.Application).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initApplication();
                                    this.initSystemApplicationQuery();
                                }
                            })
                        }
                    });
            } else {
                this.$refs['ApplicationForm'].validate(valid => {
                    if (valid) {
                        this.postRequest("/authorization/OauthClientDetails/insert/OauthClientDetails", this.Application).then(resp => {
                            if (resp) {
                                // 关闭弹框
                                this.dialogVisible = false;
                                this.initApplication();
                                // 初始化列表
                                this.initSystemApplicationQuery();
                            }
                        })
                    }
                });
            }
        },
        // 初始化表单
        initApplication(){
            this.Application.clientId='',
            this.Application.clientName='',
            this.Application.authorizedGrantTypes='',
            this.Application.scope= '',
            this.Application.autoapprove='true',
            this.Application.clientSecretClear='',
            this.Application.webServerRedirectUri= '',
            this.Application.accessTokenValidity= 3600,
            this.Application.refreshTokenValidity= 7200,
            this.Application.additionalInformation=''
        }
    }
}

</script>

<style>


</style>
